<template>
	<view class="wrap">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<view class="section">
				<view class="title">通告信息</view>
				<u-form-item label="通告需求" prop="need" label-width="160" :required="true">
					<u-radio-group @change="taskNeedChange">
						<u-radio shape="circle" name="1">买家秀</u-radio>
						<u-radio shape="circle" name="2">种草推广</u-radio>
						<u-radio shape="circle" name="3">同城探店</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="通告奖励" prop="reward" label-width="160" :required="true">
					<u-radio-group @change="taskRewardChange">
						<u-radio shape="circle" name="1">赠免</u-radio>
						<u-radio shape="circle" name="2">付费</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item v-if="model.reward==2" label="通告费用" prop="cost" label-width="160" :required="true">
					<u-input placeholder="请填写通告费用" v-model="model.cost" type="number"></u-input>
				</u-form-item>
				<u-form-item v-if="model.need==2||model.need==3" label="推广渠道" prop="platform" label-width="160" :required="true">
					<u-input type="select" :select-open="selectPlatformShow" v-model="model.platform" placeholder="请选择推广平台" @click="selectPlatformShow = true"></u-input>
				</u-form-item>
				<u-form-item label="信用担保" prop="isGuaranty" label-width="160" :required="true">
					<u-radio-group @change="taskIsGuarantyChange">
						<u-radio shape="circle" name="1">需要</u-radio>
						<u-radio shape="circle" name="0">不需要</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="通告标题" prop="title" label-width="160" :required="true">
					<u-input placeholder="请输入标题" v-model="model.title" type="text"></u-input>
				</u-form-item>
				<u-form-item label="商品类型" prop="category" label-width="160" :required="true">
					<u-input type="select" :select-open="selectGoodsCategoryShow" v-model="model.category" placeholder="请选择商品类型" @click="selectGoodsCategoryShow = true"></u-input>
				</u-form-item>
				<u-form-item label="面向地区" prop="region" label-width="160" :required="true" @tap="citySelectChange=true">
					<u-input type="select" :select-open="citySelectChange" v-model="model.region" placeholder="请选择地区" @click="citySelectChange = true"></u-input>
				</u-form-item>
				<u-form-item label="招募人数" prop="nums" label-width="160" :required="true">
					<u-input placeholder="请填写招募人数" v-model="model.nums" type="number"></u-input>
				</u-form-item>
				<u-form-item v-if="model.need==2||model.need==3" label="粉丝要求" prop="fans" label-width="160" :required="true">
					<u-input placeholder="要求粉丝数量多少起步" v-model="model.fans" type="number"></u-input>
				</u-form-item>
				<u-form-item label="通告要求" prop="demand" label-width="160" :required="true">
					<u-input type="textarea" placeholder="请填写通告要求,禁止填写联系方式" v-model="model.demand" />
				</u-form-item>
				<u-form-item label="通告主图" label-width="160" :required="true">
					<u-upload width="160" height="160" :mediaType="masterMediaType" :maxCount="9" :previewFullImage="true" :auto-upload='false' @on-list-change="masterImagesChange"></u-upload>
				</u-form-item>
			</view>
			<view class="section" v-if="model.need==2||model.need==3">
				<view class="title">种草条件</view>
				<u-form-item v-if="model.need==2||model.need==3" label="种草文案" prop="grassText" label-width="160" :required="true">
					<u-input placeholder="请输入种草文案" v-model="model.grassText" type="textarea"></u-input>
				</u-form-item>
				<u-form-item label="种草时长"  label-width="160" :required="true">
					<u-input placeholder="请输入种草最少保留天数" v-model="model.grassDays" type="number"></u-input>
				</u-form-item>
			</view>
			<view class="section">
				<view class="title">拍摄要求</view>
				<u-form-item label="露脸要求" prop="isShowFace" label-width="160" :required="true">
					<u-radio-group @change="isShowFaceChange">
						<u-radio shape="circle" name="0">随意</u-radio>
						<u-radio shape="circle" name="1">必须露脸</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="性别要求" prop="gender" label-width="160" :required="true">
					<u-radio-group @change="modeGenderChange">
						<u-radio shape="circle" name="0">不限</u-radio>
						<u-radio shape="circle" name="1">男</u-radio>
						<u-radio shape="circle" name="2">女</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="照片要求" prop="photoNums" label-width="160" :required="true">
					<u-input placeholder="照片数量" v-model="model.photoNums" type="number"></u-input>
				</u-form-item>
				<u-form-item label="视频要求" prop="videoSeconds" label-width="160" :required="true">
					<u-input placeholder="视频秒数,不需要视频就填0秒" v-model="model.videoSeconds" type="number"></u-input>
				</u-form-item>
				<u-form-item label="参考图作品" prop="referenceImages" label-width="160">
					<u-upload width="160" height="160" :maxCount="9" :previewFullImage="true" :auto-upload='false' @on-list-change="referenceMediaChange"></u-upload>
				</u-form-item>
			</view>
			<view class="section">
				<view class="d-flex justify-content-between align-items-center">
					<view class="title">联系方式</view>
					<view class="text-color-primary" @tap="editContact"><u-icon class='mr-10' name='edit-pen'></u-icon>{{contact?'修改':'新增'}}</view>
				</view>
				<view class="pb-20">
					<view class="mb-10 d-flex">
						<view class="mr-20 text-color-assist" style="width: 120rpx;">姓名:</view>
						<view>{{contact.name}}</view>
					</view>
					<view class="mb-10 d-flex">
						<view class="mr-20 text-color-assist" style="width: 120rpx;">手机号:</view>
						<view>{{contact.mobile}} <text class="text-color-assist ml-10">({{contact.is_show_mobile?'展示':'不展示'}})</text>		</view>
					</view>
					<view class="mb-10 d-flex">
						<view class="mr-20 text-color-assist" style="width: 120rpx;">微信号:</view>
						<view>{{contact.wechat_no}}</view>
					</view>
					<view class="mb-10 d-flex">
						<view class="mr-20 text-color-assist flex-shrink-0" style="width: 120rpx;">地址:</view>
						<view>{{contact.address}}</view>
					</view>
				</view>
			</view>
		</u-form>
		<!-- 发布通告 end -->
		<view class="footer">
			<view class="bottom">
				<view class="font-size-lg font-weight-bold ml-30">
					<view class="text-color-primary font-weight-bold"><text class="font-size-extra-lg">5</text><text class="font-size-base">人人豆</text></view>
					<text class="text-color-assist font-size-sm">剩余：{{userInfo.beans}}人人豆</text>
				</view>
				<view class="button">
					<button type="primary" @tap='submit'>发布</button>
				</view>
			</view>
		</view>
		<!-- 面向地区城市选择 -->
		<city-select v-model="citySelectChange" @city-change="cityChange"></city-select>
		<u-select mode="single-column" :list="selectPlatformData" v-model="selectPlatformShow" @confirm="selectPlatformConfirm"></u-select>
		<u-select mode="single-column" :list="initialize.goodsCategory" v-model="selectGoodsCategoryShow" @confirm="selectGoodsCategoryConfirm"></u-select>
	</view>
</template>

<script>
import {mapState, mapMutations } from 'vuex'
import citySelect from '@/components/city-select/city-select.vue';
export default {
	components: {
		citySelect
	},
	data() {
		return {
			errorType: ['toast'],
			selectGoodsCategoryShow:false,
			selectGoodsCategoryData:[],
			masterImages:[],
			masterMediaType:['image'],
			referenceMedia:[],
			citySelectChange:false,
			selectPlatformShow:false,
			selectPlatformData:[{label:'小红书',value:'1'},{label:'朋友圈',value:'2'},{label:'抖音',value:'3'},{label:'微博',value:'4'},{label:'快手',value:'5'},{label:'美团',value:'6'},{label:'饿了嘛',value:'7'}],
			model: {
				title: '',
				need: '',
				platform:'',
				platformValue:'',
				reward: '',
				isGuaranty:'',
				category:'',
				region:'',
				province:'',
				provinceValue:'',
				city:'',
				cityValue:'',
				cost:'',
				nums:'',
				fans:'',
				demand: '',
				masterImages:[],
				isShowFace:'',
				gender:'',
				photoNums:'',
				videoSeconds:'',
				referenceMedia:[],
				grassDays:'',
				grassText:''
			},
			rules: {
				title: [
					{
						required: true,
						message: '请输入通告标题',
						trigger: 'blur' ,
					},
				],
				need: [
					{
						required: true,
						message: '请选择通告需求',
						trigger: 'change'
					},
				],
				isGuaranty: [
					{
						required: true,
						message: '请选择是否需要信用担保',
						trigger: 'change'
					},
				],
				nums: [
					{
						required: true,
						message: '请输入招募人数',
						trigger: 'change'
					},
				],
				isShowFace:[
					{
						required: true,
						message: '请选择拍摄是否露脸',
						trigger: 'change'
					},
				],
				gender:[
					{
						required: true,
						message: '请选择招募性别',
						trigger: 'change'
					},
				],
				photoNums:[
					{
						required: true,
						message: '请填写拍摄照片数量',
						trigger: 'change'
					},
				],
				videoSeconds:[
					{
						required: true,
						message: '请填写拍摄视频的秒数',
						trigger: 'change'
					},
				]
			}
		};
	},
	computed:{
		...mapState(['initialize', 'userInfo', 'contact']),
	},
	onLoad() {
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		taskNeedChange(e) {
			this.model.need = e;
		},
		taskRewardChange(e) {
			this.model.reward = e;
		},
		selectGoodsCategoryConfirm(e) {
			e.map((val, index) => {
				this.model.category = val.label;
			})
		},
		isShowFaceChange(e) {
			this.model.isShowFace = e;
		},
		modeGenderChange(e) {
			this.model.gender = e;
		},
		taskIsGuarantyChange(e) {
			this.model.isGuaranty = e;
		},
		selectPlatformConfirm(e) {
			e.map((val, index) => {
				this.model.platform = val.label; 
				this.model.platformValue = val.value;
			})
		},
		cityChange(e) {
			this.model.region        = e.city;
			this.model.province      = e.province;
			this.model.provinceValue = e.provinceValue;
			this.model.city          = e.city;
			this.model.cityValue     = e.cityValue;
		},
		masterImagesChange(lists, name) {
			this.masterImages = lists;
		},
		referenceMediaChange(lists, name) {
			this.referenceMedia = lists;
		},
		async submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					let that = this;
					uni.showModal({
						title: '提示',
						content: '发布通告将消耗5个人人豆!',
						confirmText:'发布',
						success (res) {
							if (res.confirm) {
								that.request();
							} 
						}
					})
				} 
			});
		},
		async request(e) {
			if(this.masterImages.length==0) {
				uni.showToast({
					title: "请上传商品主图",
					icon: "none"
				});return;
			}
			
			if(this.model.need==1||this.model.need==2||this.model.need==3) {
				if(!this.model.reward) {
					uni.showToast({
						title: "请选择通告奖励",
						icon: "none"
					});return;
				}
			}
			
			if(this.model.need==2||this.model.need==3) {
				if(!this.model.grassText) {
					uni.showToast({
						title: "请输入种草文案",
						icon: "none"
					});return;
				}
				
				if(!this.model.grassDays) {
					uni.showToast({
						title: "请输入种草时长",
						icon: "none"
					});return;
				}
			}
		
			if(!this.contact) {
				this.$u.toast('请完善联系方式！'); return;
			}
			
			if(!this.contact.name) {
				this.$u.toast('姓名不能为空！'); return;
			}
			
			if(!this.contact.mobile) {
				this.$u.toast('手机号不能为空！'); return;
			}
			
			if(!this.contact.wechat_no) {
				this.$u.toast('微信号不能为空！'); return;
			}
			
			if(!this.contact.address) {
				this.$u.toast('地址不能为空！'); return;
			}
			
			uni.showLoading({mask: true,title: '提交中...'});
			uni.redirectTo({url:"/pages/jump/jump?txt=提交成功"})
			uni.hideLoading();
		},
		editContact() {
			uni.navigateTo({
				url:"/pages/my/contact"
			})
		}
	}
};
</script>
<style>
page {
	background-color: #F5F5F5;
}
.wrap {
	padding-bottom: 150rpx;
}
.section {
	background-color: #FFFFFF;
	padding: 0 30rpx;
	margin-top: 20rpx;
}
.section .title {
	padding: 30rpx 0;
	font-size: 36rpx;
	font-weight: bold;
}
.submit-btn{
	width: 100%;
	background-color: #FFFFFF;
	position: fixed;
	bottom:0;
	margin-top: 40rpx;
	z-index: 999;
}

</style>
<style scoped lang="scss">
.footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	background-color: #FFFFFF;
	z-index: 10;
	
	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.button {
			margin-right: 20rpx;
			padding: 20rpx 0;
		
			button {
				height: 100%;
				font-size: $font-size-lg;
				border-radius: 50rpx !important;
				padding: 0 120rpx;
			}
		}
		
	}
}
</style>